<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<link rel="stylesheet" href="lib/swiper/css/swiper.css">
	<script>
		document.querySelector('html').style.fontSize = (document.documentElement.clientWidth || document.body.clientWidth) /
			20 + 'px';

		window.onresize = function () {
			console.log(document.documentElement.clientWidth || document.body.clientWidth);
			document.querySelector('html').style.fontSize = (document.documentElement.clientWidth || document.body.clientWidth) /
				20 + 'px';
		}
	</script>
</head>

<body>
	<!-- loading页面 -->
	<div class="loading">
		<div class="rider"></div>
		<div class="progress">
			<div class="step"></div>
		</div>
		<div class="info"></div>
		<!-- logo -->
		<div class="logo"></div>
		<div class="copyright">
			@ 2018 baidu waimai pro
		</div>
	</div>
	<!-- 欢迎页面 -->
	<div class="welcome">
		<div class="title">
			<div class="hello"></div>
		</div>
		<div class="cloud"></div>
		<div class="grass1"></div>
		<div class="grass2"></div>
		<div class="trees"></div>
		<div class="bear-box">
			<div class="bear"></div>
			<div class="smoke"></div>
		</div>
		<div class="circle-btn-box">
			<div class="circle1"></div>
			<div class="circle2"></div>
			<div class="btn"></div>
		</div>
	</div>
	<!-- 切换的页面 swiper实现 -->
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide page1">
				<div class="title">
					<h3>生活中,</h3>
					<p>经常有这种时候...</p>
					<div class="line"></div>
				</div>
				<div class="slide-page1">
					<div class="bg"></div>
					<div class="person">
						<div class="papers">
							<div class="paper1"></div>
							<div class="paper2"></div>
							<div class="paper3"></div>
						</div>
					</div>
					<div class="sphere"></div>
					<div class="message-container">
						<div class="info"></div>
					</div>
				</div>
				<div class="slide-page2">
					<div class="bg"></div>
					<div class="person">
						<div class="leg1"></div>
						<div class="leg2"></div>
					</div>
					<div class="sphere"></div>
					<div class="message-container">
						<div class="info"></div>
					</div>
				</div>
				<div class="slide-page3">
					<div class="bg"></div>
					<div class="person">
						<div class="word1"></div>
						<div class="word2"></div>
						<div class="word3"></div>
						<div class="word4"></div>
					</div>
					<div class="sphere"></div>
					<div class="message-container">
						<div class="info"></div>
					</div>
				</div>
				<div class="bear"></div>
			</div>
			<div class="swiper-slide page2">
				<div class="title">
					<h3>生活中,</h3>
					<p>经常有这种时候...</p>
					<div class="line"></div>
				</div>
				<div class="bg"></div>
				<div class="baer">
					<div class="face1"></div>
					<div class="face2"></div>

					<div class="hand-left"></div>
					<div class="hand-right"></div>
				</div>
				<div class="table"></div>
				<div class="food"></div>
				<div class="sphere"></div>
			</div>
			<div class="swiper-slide page3">
				<div class="title">
					<h3>这时候,</h3>
					<p>如果有一份美味外卖...<br>正好出现...</p>
					<div class="line"></div>
				</div>
				<div class="bg"></div>
				<div class="bear"></div>
				<div class="animation-bear-box">
					<div class="bear1"></div>
					<div class="bear2"></div>
					<div class="bear3"></div>
				</div>
				<div class="normal-card">
					<div class="license"></div>
					<div class="oil"></div>
					<div class="evil"></div>
				</div>
				<div class="hit-box">
					<div class="card1"></div>
					<div class="card2"></div>
					<div class="card3"></div>
				</div>
				<div class="sphere"></div>
			</div>
			<div class="swiper-slide page4">
				<div class="title">
					<h3>百度外卖</h3>
					<p>只做有品质的外卖<br>操作快捷...</p>
					<div class="line"></div>
				</div>
				<div class="bg"></div>
				<div class="bear"></div>
				<div class="card1"></div>
				<div class="card2"></div>
				<div class="card3"></div>
				<div class="sphere"></div>
			</div>
			<div class="swiper-slide page5">
				<div class="title">
					<h3>无论前方</h3>
					<p>狂风，大雨，还是飘雪...<br>始终坚持在路上...</p>
					<div class="line"></div>
				</div>
				<div class="bg"></div>
				<div class="bear"></div>
				<div class="cloud">
					<div class="snow"></div>
					<div class="snow"></div>
					<div class="snow"></div>
					<div class="snow"></div>
					<div class="snow"></div>
					<div class="rain"></div>
				</div>
				<div class="sphere"></div>
			</div>
			<div class="swiper-slide page6">
				<div class="title">
					<h3>丰富礼品</h3>
					<p>让你边吃，边省钱...<br>始终坚持在路上...</p>
					<div class="line"></div>
				</div>
				<div class="bg"></div>
				<div class="bear">
					<div class="gif-box">
						<div class="gif1"></div>
						<div class="gif2"></div>
						<div class="gif3"></div>
						<div class="gif4"></div>
						<div class="gif5"></div>
						<div class="gif6"></div>
						<div class="gif7"></div>
						<div class="gif8"></div>
						<div class="gif9"></div>
						<div class="gif10"></div>
						<div class="gif11"></div>
						<div class="gif12"></div>
					</div>
				</div>
				<div class="cloud"></div>
				<div class="sphere"></div>
			</div>
			<div class="swiper-slide page7">
				<div class="title">
					<h3>所有的努力</h3>
					<p>让你边吃，边省钱...<br>😄...</p>
					<div class="line"></div>
				</div>
				<div class="streetlight">
					<div class="light"></div>
					<div class="motobike"></div>
				</div>
				<div class="bear"></div>
				<div class="share"></div>
				<div class="sphere"></div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="lib/swiper/js/swiper.min.js"></script>
	<script type="text/javascript" src="lib/zepto/zepto.js"></script>
	<script type="text/javascript" src="lib/zepto/event.js"></script>
	<script type="text/javascript" src="lib/zepto/fx.js"></script>
	<script type="text/javascript" src="lib/zepto/fx_methods.js"></script>
	<script type="text/javascript" src="lib/zepto/touch.js"></script>
</body>

</html>